<template>
  <view class="container">
    <ve-card type="none" title="基本信息">
      <ve-cell label="企业客户名称">{{ record.clientName || '-' }}</ve-cell>
      <ve-cell label="电子合同认证状态">
        <text :class="'contract-status_'+record.ecAuthenticationStatus">{{ record.ecAuthenticationStatusName }}</text>
      </ve-cell>
      <view v-if="record.ecAuthenticationStatus == 0" class="status_reason c1 fw400 fs30">
        <view>原因：</view>
        <view v-if="record.authenticationFailedReason">{{ record.authenticationFailedReason || '-' }}</view>
      </view>
      <ve-cell label="签章方式">{{ record.contractSignWayName || '-' }}</ve-cell>
    </ve-card>

    <ve-card title="企业联系人" type="none">
      <ve-cell label="姓名">{{ record.linkman || '-' }}</ve-cell>
      <ve-cell label="手机号">{{ record.mobile || '-' }}</ve-cell>
    </ve-card>

    <ve-card title="发票信息" type="none">
      <ve-cell label="抬头">{{ record.billTitle || '-' }}</ve-cell>
      <ve-cell label="纳税人识别号">{{ record.taxpayerId || '-' }}</ve-cell>
      <ve-cell label="公司地址">{{ record.address || '-' }}</ve-cell>
      <ve-cell label="联系电话">{{ record.billReceiverPhone || '-' }}</ve-cell>
    </ve-card>

    <view class="call-record" v-if="!contractList.length">
      <view class="record-title">
        <view class="record-title-main">上传合同信息</view>
        <view class="empty-call">暂无合同信息</view>
      </view>
    </view>

    <ve-card title="上传合同信息" type="none" v-else>
      <view v-for="(item, index) in contractList" :key="index" style="margin-top: 16rpx; margin-bottom: 32rpx">
        <ve-cell style="margin: 16rpx 0" :label="`合同${index + 1}`"></ve-cell>
        <view class="fee-content">
          <view
            style="
              font-size: 30rpx;
              font-family: PingFang SC, PingFang SC;
              font-weight: 400;
              color: #8491a8;
              line-height: 30rpx;
              margin-bottom: 16rpx;
            "
            >合同名称</view
          >
          <view v-if="item.fileId">
            <view v-if="item.fileType == 'FILE'" class="fileNameContent">
              <text class="fileNameContentText" @click="preFile(item.fileId)">{{ item.originalFileName }}</text>
            </view>
            <view v-else class="fileTypeImgContent">
              <image :src="item.openUrl" class="fileTypeImg" @click="preFile(item.fileId)" />
            </view>
          </view>

          <view class="credentials_item" v-else>
            <div v-if="item.openUrl"> </div>
            <div v-if="!item.openUrl">
              <div>
                <image src="../../../../../static/images/empty.png" class="empty_img" />
              </div>
              <p class="empty_text">暂无数据</p>
            </div>
          </view>
          <ve-cell label="合同有效期">{{ item.startTime }}至 {{ item.endTime }}</ve-cell>
          <ve-cell label="签约人">{{ item.signUserName }}</ve-cell>
        </view>
      </view>
    </ve-card>
  </view>
</template>

<script setup>
  import { onLoad } from '@dcloudio/uni-app'
  import { clientInfoDetail, getFileInfo } from '@/api/market/member'
  import { ref } from 'vue'
  import { getFile } from '@/api/common/index'

  const record = ref({})
  onLoad((id) => {
    console.log(id.id)
    if (id) {
      getDetail(id)
    }
  })
  const contractList = ref([])
  const getDetail = async (id) => {
    console.log(id.id)
    const res = await clientInfoDetail({ id: id.id })
    if (res.code === 200) {
      const data = res.result
      record.value = data
      contractList.value = data.contractList || []
      if (data.contractList && data.contractList.length) {
        getFileInfoApi()
      }
    }
  }

  const getFileInfoApi = () => {
    contractList.value.forEach((item) => {
      if (item.fileId) {
        getFileInfo({ id: item.fileId }).then((res) => {
          if (res.code == 200) {
            let result = res.result
            item.openUrl = result.openUrl
            item.fileType = result.fileType
            item.originalFileName = result.originalFileName
          }
        })
      }
    })
  }

  // 预览
  const preFile = async (policyImgFileId) => {
    var res = await getFile({ idList: [policyImgFileId] })
    console.log(JSON.stringify(res))
    if (res.code == 200) {
      var url = res.result[0].openUrl
      if (url.indexOf('pdf') > -1 || url.indexOf('word') > -1) {
        uni.downloadFile({
          url: url,
          success: function (res) {
            if (res.statusCode === 200) {
              // 下载成功
              const filePath = res.tempFilePath // 下载后的临时文件路径
              uni.saveFile({
                tempFilePath: filePath,
                success: function (listRes) {
                  //此API是为了拿到文件保存的详细路径
                  plus.io.requestFileSystem(
                    plus.io.PRIVATE_DOC,
                    function (fs) {
                      // 拿到 _doc 所在的完整路径
                      console.log(fs.root.fullPath)
                      //弹出文件保存路径
                    },
                    function (e) {
                      console.log('Request file system failed: ' + e.message)
                    },
                  )
                  //保存成功后,调用文件打开方法
                  uni.openDocument({
                    filePath,
                    success: function (file) {
                      console.log('file-success', file)
                    },
                  })
                },
                fail: function (err) {
                  // 保存文件失败
                  uni.showToast({
                    title: '保存文件失败',
                    icon: 'none',
                  })
                },
              })
            } else {
              // 下载失败
              uni.showToast({
                title: '下载失败',
                icon: 'none',
              })
            }
          },
          fail: function (err) {
            // 下载请求失败
            uni.showToast({
              title: '下载请求失败',
              icon: 'none',
            })
          },
        })
      } else {
        uni.previewImage({
          urls: [url],
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .container {
    width: 100vw;
    height: auto;
    background: #f7f8fa;
    padding: 24rpx;
  }
  .credentials_content {
    display: flex;
    justify-content: space-between;
  }
  .fee-content {
    background: #f7f8fa;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
    padding: 32rpx 24rpx 0.1rpx 24rpx;
  }
  .credentials_item {
    width: 204rpx;
    height: 204rpx;
    background: #f7f8fa;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    opacity: 1;
    border: 2rpx solid #e2e2e2;
    .card_style {
      width: 204rpx;
      height: 204rpx;
    }
    .empty_img {
      width: 53rpx;
      height: 51rpx;
      margin-left: 22rpx;
      z-index: 10000;
    }
    .empty_text {
      font-size: 24rpx;
      font-weight: 400;
      color: #b6b6b6;
    }
  }
  .fileNameContent {
    height: 108rpx;
    background: #eff0f2;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    padding: 32rpx;
  }
  .fileNameContentText {
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    color: #1890ff;
    line-height: 44rpx;
    border-bottom: 2rpx solid #1890ff;
  }
  .fileTypeImgContent {
    width: 204rpx !important;
    height: 204rpx !important;
    .fileTypeImg {
      width: 204rpx !important;
      height: 204rpx !important;
    }
  }
  .call-record {
    position: relative;
    background: #ffffff;
    border-radius: 8rpx;
    margin-bottom: 24rpx;
    padding: 32rpx 24rpx;
    height: 108rpx;
    box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.05);
    .record-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .record-title-main {
      font-size: 32rpx;
      font-weight: 600;
      color: rgba(25, 28, 39, 1);
    }
    .empty-call {
      font-size: 30rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #cdced0;
    }
    .record-title-sub {
      font-size: 30rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #9ea5bb;
      display: flex;
      align-items: center;
    }
  }
</style>
